<template>
  <div class="padded-10 van-hairline--bottom">
    <van-row type="flex" align="center">
      <van-col :span="6" @click="detail(order.id)">
        <van-image
          :src="order.image"
          width="80"
          height="80"
          position="center"
          fit="cover"
        />
      </van-col>
      <van-col :span="12">
        <div class="p-b-5">
          <van-tag color="#1baeae" v-text="order.type"></van-tag>
          <span>下单{{ order.price }}元,返{{ order.back_price }}元</span>
          <van-row align="center">
            <span class="p-r-5">试用ID： {{ order.id }}</span>
            <van-button
              type="primary"
              size="mini"
              class="copy"
              :data-clipboard-text="order.id"
              @click="copy('.copy')"
              >复制</van-button
            >
          </van-row>
        </div>
        <van-row type="flex" align="center" v-if="order.exittime">
          <van-count-down
            :time="order.exittime * 1000"
            format="DD 天 HH 时 mm 分 ss 秒"
            v-if="order.exittime"
            @finish="ctx.emit('initList')"
          /><span>后失效</span>
        </van-row>
      </van-col>
      <van-col :span="6" class="text-right">
        <van-tag
          type="default"
          v-text="order.statusname"
          plain
          size="medium"
        ></van-tag>
      </van-col>
    </van-row>
    <div class="text-green ftn14 p-t-5 p-b-5">下单买号： {{ order.buynum }}</div>
    <div class="p-t-5 text-7 ftn12 van-hairline--top" v-if="order.status == 8">您长时间没有参加该试用,已过期！</div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
import type { PropType } from "vue";
import {copy} from "@/plugins/common"
import {useRouter} from 'vue-router'

type IOrder = {
  statusname: string;
  type: string;
  image: string;
  price: string;
  back_price: string;
  exittime: number;
  id: number;
  buynum: string;
  status: number;
};
export default defineComponent({
  props: {
    item: {
      type: Object as PropType<IOrder>,
      required: true,
    },
  },
  setup(props: any, ctx) {
    let { item } = props;
    const order = ref<IOrder>(item), router = useRouter()

    const detail = (id: number) => {
      router.push({name: 'order_detail', params: {id: id}})
    }
    return { order, ctx, copy, detail };
  },
});
</script>
